<template>
  <div>
    <div>筛选查询
      <el-select v-model="value" placeholder="请选择项目">
        <el-option v-for="item in Allproject" :key="item.projectId" :label="item.projectName" :value="item.projectName">
        </el-option>
      </el-select>
      <div class="block" style="float: right; position: relative;right: 700px;">
        <span class="demonstration">开始时间</span>
        <el-date-picker v-model="value1" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="block" style="float: right;position: relative;right: 120px;">
        <span class="demonstration">结束时间</span>
        <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期">
        </el-date-picker>
      </div>
      <el-button style="float: right; position: relative; left: 270px;" @click="selByCondition()">查询</el-button>
    </div>
    <div id="main" style="width: 700px;height:400px;">

    </div>
  </div>

</template>

<script>
  export default {
    name: "defectstatepro",
    data() {
      return {
        Allproject: [],
        value: "",
        AllDefectState: {},
        value1: "",
        value2: "",
        data1: [],
        series: [],

      }
    },


    methods: {

      init: function() {
        var chartDom = document.getElementById('main');
        var myChart = this.$echarts.init(chartDom);
        var option;

      option = {
        toolbox: {
        　　show: true,
        　　feature: {
        　　　　saveAsImage: {
        　　　　show:true,
        　　　　excludeComponents :['toolbox'],
        　　　　pixelRatio: 2
        　　　　}
        　　}
        },
        xAxis: {
          type: 'category',
          data: this.data1
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.series,
            type: 'bar'
          }
        ]
      };

      option && myChart.setOption(option);
      },
      getAllProjects() {
        this.$http.get("projectInfo/getAllProject").then(resp => {
          this.Allproject = resp.data.data
        })
      },

       getAllDefect(){
         this.$http.get("defectState/getAllDefect").then(resp=>{
         this.data1=resp.data.data.map(state=>state.issueState)
         this.series=resp.data.data.map(state=>state.count)
         this.init()


         })
       },
       selByCondition(){
         this.$http.post("defectRecord/getStateCount",{"projectName":this.value,
                                                        "startTime":this.value1,
                                                        "endTime":this.value2
          }).then(resp=>{
           this.data1=resp.data.data.map(state=>state.issueState)
           this.series=resp.data.data.map(state=>state.count)
           this.init()
         })
       }

    },
    created() {
      this.getAllProjects()

      this.getAllDefect()
    },

    mounted() {
      this.init()

    },
    watch:{
      "data1":function(){
        this.init()
      },

      },
      watch:{
        "series":function(){
          this.init()
        },

        }


  }
</script>

<style>
</style>
